<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务队列</title>
</head>
<body>
<script>
    /*
    * 任务队列
    * 实现原理
    * 如果then返回的是promise时候，后面的then就是对返回的promise的处理
    * */
    // let promise = Promise.resolve();
    //
    // let p1 = promise.then(() => {
    //     return new Promise(resolve => {
    //         setTimeout(() => {
    //             console.log(`p1`);
    //             resolve();
    //         },1000);
    //     });
    // });
    //
    // p1.then(() => {
    //     return new Promise((a,b) => {
    //         setTimeout(() => {
    //             console.log(`p2`);
    //         },1000);
    //     })
    // });


    /*
    *下面使用map构建的队列，有以下几点需要说明
    *(1)then内部返回的promise更改外部的promise
    *(2)为了让任务执行,执行完任务需要将promise状态修改为fulfilled
    * */
    // function queue(nums) {
    //     let promise = Promise.resolve();
    //     nums.map(n => {
    //         promise = promise.then(v => {
    //             return new Promise(resolve => {
    //                 setTimeout(() => {
    //                     console.log(n);
    //                     resolve();
    //                 },1000);
    //             });
    //         });
    //     });
    // }
    // queue([1,2,3,4,5]);


    //下面通过reduce来实现队列
    // function queue(nums){
    //     return nums.reduce((promise,n)=>{
    //         return promise.then(() => {
    //            return new Promise(resolve => {
    //                setTimeout(() => {
    //                    console.log(n);
    //                    resolve();
    //                },1000);
    //            });
    //         });
    //     },Promise.resolve());
    // }
    //
    // queue([1,2,3,4,5]);

    //队列请求
    //下面是异步加载用户并渲染到视图中的队列实例











</script>
</body>
</html>